import { Layout, Menu ,Button,Avatar,Image,Select } from 'antd';
import React from 'react';
import Cookies from 'js-cookie'
import { mainrouter } from '../router/Router_config';
import {useNavigate, NavLink,Outlet} from "react-router-dom"
import { SetIcon } from '../globa';
import {useDispatch,useSelector} from "react-redux"

type Props = {}
const { Header, Content, Footer, Sider } = Layout;

const Index: React.FC = () => {

  const userinfo = useSelector((state:any)=>state.reducer.userarr)
  // console.log(userinfo);
  const Navigate=useNavigate()
  return (
  <Layout>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
    >
      <div className="logo" />
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['4']}
        items={mainrouter.map(
          (item, index) => ({
            key: String(index + 1),
            icon: SetIcon(item.icon),
            label: <NavLink to={item.path}>{item.title}</NavLink>,
          }),
        )}
      />
      
    </Sider>
    
    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} >
      <div></div>
            <div style={{width:"300px",display:"flex",alignItems: "center",justifyContent: "spaceAround"}}>
                <Avatar className='avvtar' src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
                <span>用户名：{userinfo.username}</span>
                <span> <Button onClick={()=>{
                    Cookies.remove("token")
                    localStorage.removeItem("token")
                    Navigate("/login")
                    window.location.reload()
                }}>退出登录</Button></span>
               
              
            </div>
           
      </Header>
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
          <Outlet></Outlet>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  </Layout>
  )
};

export default Index;